<template>
	<view class="indexContainer">
		<!-- 自定义导航 -->
		<view class="navBarContainer">
			<!-- 默认导航占位 -->
			<view class="defaultContainer" :style="{height:naviBarHeight+'rpx'}"></view>
			<!-- 头部 -->
			<view class="navContainer">
				<!-- 定位 -->
				<view class="positioning" @click="toLocation">
					<u-icon name="map-fill" color="white"></u-icon>
					<strong class="address">大江商厦</strong>
					<u-icon name="arrow-down-fill" size="18" color="white"></u-icon>
				</view>
				<view class="search">
					<u-icon class="searchIcon" name="search" color="red" size="24"></u-icon>
					<input class="searchInput" type="text" v-model="searchValue" placeholder="面条" />
					<button class="searchText">搜索</button>
				</view>
			</view>
		</view>
		<!-- view占位 -->
		<view :style="{height:naviBarHeight+140+'rpx'}"></view>
		<!-- 新人尝鲜 -->
		<view class="newContainer" >
			<view class="newTop">
				<view class="newPerson">
					<p>新人尝鲜价</p>
					<p class="newPrice">限量供应,抢完即止</p>
				</view>
				<b>查看更多></b>
			</view>
			<!-- scroll-view -->
			<view class="cartScrollContainer">
				<scroll-view enable-flex="true" class="cartScroll" scroll-x="true">
					<view class="cartList">
						<view class="test">
							<image src="../../static/logo.png" class="cart" />
							<p class="cartDescribe">土鸡蛋8枚</p>
							<p class="cartPrice">￥5.90</p>
							<u-icon name="shopping-cart" color="white" size="24" class="cartIcon"></u-icon>
							<p class="oldPrice">￥5.90</p>
						</view>
						<view class="test">
							<image src="../../static/logo.png" class="cart" />
							<p class="cartDescribe">土鸡蛋8枚</p>
							<p class="cartPrice">￥5.90</p>
							<u-icon name="shopping-cart" color="white" size="24" class="cartIcon"></u-icon>
							<p class="oldPrice">￥5.90</p>
						</view>
						<view class="test">
							<image src="../../static/logo.png" class="cart" />
							<p class="cartDescribe">土鸡蛋8枚</p>
							<p class="cartPrice">￥5.90</p>
							<u-icon name="shopping-cart" color="white" size="24" class="cartIcon"></u-icon>
							<p class="oldPrice">￥5.90</p>
						</view>
						<view class="test">
							<image src="../../static/logo.png" class="cart" />
							<p class="cartDescribe">土鸡蛋8枚</p>
							<p class="cartPrice">￥5.90</p>
							<u-icon name="shopping-cart" color="white" size="24" class="cartIcon"></u-icon>
							<p class="oldPrice">￥5.90</p>
						</view>
					
						<view class="more"><p>查看更多</p></view>
					</view>
				</scroll-view>
			</view>
			<!-- 优惠券 -->
			<view class="newTop">
				<view class="newPerson">
					<p>108元券包</p>
					<p class="newPrice">新人专享,首单免邮</p>
				</view>
			</view>
			<view class="couponsScrollContainer">
				<scroll-view scroll-x="true" enable-flex="true" class="couponsScroll">
					<view class="couponsList">
						<view class="couponsItem">
							<view class="couponsItemTop">
								<p class="couponsMoney">￥</p>
								<p class="couponsPrice">13</p>
							</view>
							<view class="couponsItemBottom"><p class="couponsFull">满30.00可用</p></view>
						</view>
						<view class="couponsItem">
							<view class="couponsItemTop">
								<p class="couponsMoney">￥</p>
								<p class="couponsPrice">13</p>
							</view>
							<view class="couponsItemBottom"><p class="couponsFull">满30.00可用</p></view>
						</view>
						<view class="couponsItem">
							<view class="couponsItemTop">
								<p class="couponsMoney">￥</p>
								<p class="couponsPrice">13</p>
							</view>
							<view class="couponsItemBottom"><p class="couponsFull">满30.00可用</p></view>
						</view>
						<view class="couponsItem">
							<view class="couponsItemTop">
								<p class="couponsMoney">￥</p>
								<p class="couponsPrice">13</p>
							</view>
							<view class="couponsItemBottom"><p class="couponsFull">满30.00可用</p></view>
						</view>
						<view class="couponsItem">
							<view class="couponsItemTop">
								<p class="couponsMoney">￥</p>
								<p class="couponsPrice">13</p>
							</view>
							<view class="couponsItemBottom"><p class="couponsFull">满30.00可用</p></view>
						</view>
						<view class="couponsItem">
							<view class="couponsItemTop">
								<p class="couponsMoney">￥</p>
								<p class="couponsPrice">13</p>
							</view>
							<view class="couponsItemBottom"><p class="couponsFull">满30.00可用</p></view>
						</view>
						<view class="couponsItem">
							<view class="couponsItemTop">
								<p class="couponsMoney">￥</p>
								<p class="couponsPrice">13</p>
							</view>
							<view class="couponsItemBottom"><p class="couponsFull">满30.00可用</p></view>
						</view>
						<view class="couponsItem">
							<view class="couponsItemTop">
								<p class="couponsMoney">￥</p>
								<p class="couponsPrice">13</p>
							</view>
							<view class="couponsItemBottom"><p class="couponsFull">满30.00可用</p></view>
						</view>
						<view class="couponsItem">
							<view class="couponsItemTop">
								<p class="couponsMoney">￥</p>
								<p class="couponsPrice">13</p>
							</view>
							<view class="couponsItemBottom"><p class="couponsFull">满30.00可用</p></view>
						</view>
						
					</view>
				</scroll-view>
			</view>
			<view class="oneGet"><p>一键领取</p></view>
		</view>
		<!-- 九宫格 -->
		<view class="cartListContainer">
			<scroll-view scroll-x="true" class="cartList" enable-flex="true">
				<view class="cartItem" v-for="cartItem in classificationList" :key="cartItem.id">
					<image class="cart" :src="cartItem.cartImage"></image>
					<p class="cartName">{{cartItem.name}}</p>
				</view>
			</scroll-view>
			<!-- 模拟进度条 -->
			<view class="slider"><view class="sliderInside" style="{left: left;}"></view></view>
		</view>
		<!-- 承诺 -->
		<view class="commitmentContainer">
			<view class="commitment">
				<image src="../../static/home/transport.png" />
				<span>最快27分钟送达</span>
			</view>
			<view class="commitment">
				<image src="../../static/home/money.png" />
				<span>满38元满配送费</span>
			</view>

			<view class="commitment">
				<image src="../../static/home/seal.png" />
				<span>安心退</span>
			</view>
		</view>
		<!-- 轮播图 -->
		<view class="swiperContainer">
			<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
				<swiper-item class="swiperItem"><view class="red">A</view></swiper-item>
				<swiper-item class="swiperItem"><view class="pink">B</view></swiper-item>
				<swiper-item class="swiperItem"><view class="yellow">C</view></swiper-item>
			</swiper>
		</view>
		<!-- 福利 -->
		<view class="welfareContainer">
			<view class="members">
				<p>绿卡会员</p>
				<b>
					<span>免费</span>领菜
				</b>
			</view>
			<view class="downApp">
				<p>下载App</p>
				<b>
					<span>积分</span>当钱花
				</b>				
			</view>
			<view class="invite">
				<p>邀请邻友</p>
				<b>
					得<span>30元</span>红包
				</b>
			</view>
		</view>
		<!-- 商品推荐 -->
		<view class="recommendedContainer">
			<view class="recommend1">
				<view class="newCart">限时抢购<span class="time">00:00:00</span></view>
				<view class="timi">每日疯抢特价</view>
				<view class="reacommendImage">
					<view class="cartImage">
						<image src="../../static/image/category/00-07-60.jpg"></image>
						<view class="price">￥12.90</view>
						<view class="oldPrice">￥12.90</view>
					</view>
					<view class="cartImage">
						<image src="../../static/image/category/00-07-60.jpg"></image>
						<view class="price">￥12.90</view>
						<view class="oldPrice">￥12.90</view>
					</view>
				</view>
			</view>
			<view class="recommend2">
				<view class="newCart">绿卡特惠</view>
				<view class="timi">爆品大降价</view>
				<view class="reacommendImage">
					<view class="cartImage">
						<image src="../../static/image/category/00-07-60.jpg"></image>
						<view class="price">￥12.90</view>
						<view class="oldPrice">￥12.90</view>
					</view>
					<view class="cartImage">
						<image src="../../static/image/category/00-07-60.jpg"></image>
						<view class="price">￥12.90</view>
						<view class="oldPrice">￥12.90</view>
					</view>
				</view>
				
			</view>
			<view class="recommend3">
				<view class="newCart">新品尝鲜</view>
				<view class="timi">美味年货&nbsp;超值上新</view>
				<view class="reacommendImage">
					<image src="../../static/image/category/00-07-60.jpg"></image>
					<image src="../../static/image/category/00-07-60.jpg"></image>
				</view>
			</view>
			<view class="recommend4">
				<view class="newCart">叮咚菜场</view>
				<view class="timi">时令鲜货&nbsp;买一送一</view>
				<view class="reacommendImage">
					<image src="../../static/image/category/00-07-60.jpg"></image>
					<image src="../../static/image/category/00-07-60.jpg"></image>
				</view>
			</view>
		</view>
		<!-- 商品分类 -->
		<view class="goodsListContainer">
			<scroll-view scroll-x="true" class="goodsList">
				<view class="goods">
					<view class="goodsItem" >
						<view class="goodsLike">猜你喜欢<span>|</span></view>
						<view class="goodsNice">精选好货</view>
					</view>
					<view class="goodsItem" :class="currentId === 0?'currentActive':''">
						<view class="goodsLike">特价促销<span>|</span></view>
						<view class="goodsNice">今日折扣</view>
					</view>
					<view class="goodsItem">
						<view class="goodsLike">夜宵晚市<span>|</span></view>
						<view class="goodsNice">忍不住就吃</view>
					</view>
					<view class="goodsItem">
						<view class="goodsLike">火锅到家<span>|</span></view>
						<view class="goodsNice">好吃省事</view>
					</view>
					<view class="goodsItem">
						<view class="goodsLike">时令新品</view>
						<view class="goodsNice">应季鲜活</view>
					</view>
				</view>
			</scroll-view>
			
			
		</view>
		<!-- 瀑布流 -->
		<view class="pinterestContainer">
			<view class="pinterest">
				<image src="../../static/image/category/00-07-60.jpg" class="pinterestCartImage"/>
				<span>四川耙耙柑 约800g</span>
				<u-tag text="限时" type="error" border-color="white"/>
				<u-tag text="限时特惠" type="error" border-color="white"/>
				<view class="pinterestCartPrice">
					<span class="CartMoney">￥</span>
					<span class="cartPrice">9.90</span>
					<span class="cartOldPrice">￥15.90</span>
					<u-icon name="shopping-cart" color="white" size="24" class="cartIcon"></u-icon>
				</view>
			</view>
			<view class="pinterest">
				<image src="../../static/image/category/00-07-60.jpg" class="pinterestCartImage"/>
				<span>四川耙耙柑 约800g</span>
				<u-tag text="限时" type="error" border-color="white"/>
				<u-tag text="限时特惠" type="error" border-color="white"/>
				<view class="pinterestCartPrice">
					<span class="CartMoney">￥</span>
					<span class="cartPrice">9.90</span>
					<span class="cartOldPrice">￥15.90</span>
					<u-icon name="shopping-cart" color="white" size="24" class="cartIcon"></u-icon>
				</view>
			</view>
			<view class="pinterest">
				<image src="../../static/image/category/00-07-60.jpg" class="pinterestCartImage"/>
				<span>四川耙耙柑 约800g</span>
				<u-tag text="限时" type="error" border-color="white"/>
				<u-tag text="限时特惠" type="error" border-color="white"/>
				<view class="pinterestCartPrice">
					<span class="CartMoney">￥</span>
					<span class="cartPrice">9.90</span>
					<span class="cartOldPrice">￥15.90</span>
					<u-icon name="shopping-cart" color="white" size="24" class="cartIcon"></u-icon>
				</view>
			</view>
			<view class="pinterest">
				<image src="../../static/image/category/00-07-60.jpg" class="pinterestCartImage"/>
				<span>四川耙耙柑 约800g</span>
				<u-tag text="限时" type="error" border-color="white"/>
				<u-tag text="限时特惠" type="error" border-color="white"/>
				<view class="pinterestCartPrice">
					<span class="CartMoney">￥</span>
					<span class="cartPrice">9.90</span>
					<span class="cartOldPrice">￥15.90</span>
					<u-icon name="shopping-cart" color="white" size="24" class="cartIcon"></u-icon>
				</view>
			</view>
			<view class="pinterest">
				<image src="../../static/image/category/00-07-60.jpg" class="pinterestCartImage"/>
				<span>四川耙耙柑 约800g</span>
				<u-tag text="限时" type="error" border-color="white"/>
				<u-tag text="限时特惠" type="error" border-color="white"/>
				<view class="pinterestCartPrice">
					<span class="CartMoney">￥</span>
					<span class="cartPrice">9.90</span>
					<span class="cartOldPrice">￥15.90</span>
					<u-icon name="shopping-cart" color="white" size="24" class="cartIcon"></u-icon>
				</view>
			</view>
			<view class="pinterest">
				<image src="../../static/image/category/00-07-60.jpg" class="pinterestCartImage"/>
				<span>四川耙耙柑 约800g</span>
				<u-tag text="限时" type="error" border-color="white"/>
				<u-tag text="限时特惠" type="error" border-color="white"/>
				<view class="pinterestCartPrice">
					<span class="CartMoney">￥</span>
					<span class="cartPrice">9.90</span>
					<span class="cartOldPrice">￥15.90</span>
					<u-icon name="shopping-cart" color="white" size="24" class="cartIcon"></u-icon>
				</view>
			</view>
			<view class="pinterest">
				<image src="../../static/image/category/00-07-60.jpg" class="pinterestCartImage"/>
				<span>四川耙耙柑 约800g</span>
				<u-tag text="限时" type="error" border-color="white"/>
				<u-tag text="限时特惠" type="error" border-color="white"/>
				<view class="pinterestCartPrice">
					<span class="CartMoney">￥</span>
					<span class="cartPrice">9.90</span>
					<span class="cartOldPrice">￥15.90</span>
					<u-icon name="shopping-cart" color="white" size="24" class="cartIcon"></u-icon>
				</view>
			</view>
			<view class="pinterest">
				<image src="../../static/image/category/00-07-60.jpg" class="pinterestCartImage"/>
				<span>四川耙耙柑 约800g</span>
				<u-tag text="限时" type="error" border-color="white"/>
				<u-tag text="限时特惠" type="error" border-color="white"/>
				<view class="pinterestCartPrice">
					<span class="CartMoney">￥</span>
					<span class="cartPrice">9.90</span>
					<span class="cartOldPrice">￥15.90</span>
					<u-icon name="shopping-cart" color="white" size="24" class="cartIcon"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState,mapActions} from "vuex"
export default {
	data() {
		return {
			titleHeight: 0, //状态栏和导航栏的总高度
			statusBarHeight: 0 ,//状态栏高度
			naviBarHeight:0,//导航栏高度
			searchValue: '',
			customStyle: {
				size: '16rpx',
				color: 'red',
				width: '80rpx',
				height: '60rpx'
			},
			left: 0.625, // 初始化滑块位置
			
			indicatorDots: true,
			autoplay: true,
			interval: 2000,
			duration: 500,
			
			currentId:0,  //当前选中
		};
	},
	computed:{
		...mapState("indexModule",["classificationList"])
	},
	onLoad() {
		//  动态获取不同机型状态栏 导航栏的高度 
		const res = uni.getSystemInfoSync()
		const system = res.platform
		this.statusBarHeight = res.statusBarHeight
			if (system === 'android') {
				this.titleHeight = (48 + this.statusBarHeight)
			} else if (system === 'ios') {
				this.titleHeight = (44 + this.statusBarHeight)
			}
		this.naviBarHeight = this.titleHeight - this.statusBarHeight
		this.naviBarHeight =Math.abs(this.naviBarHeight);
		},
	created(){
	},
	// 监测屏幕滚动
	onPageScroll(res){
		// console.log(res.scrollTop);
	},
	methods:{
		...mapActions("indexModule",["getClassification"]),
		toLocation(){
			uni.navigateTo({
				url:"../location/location"
			})
		},

	},
	mounted(){
		this.getClassification()
	}
};
</script>

<style lang="scss">
page {
	width: 100%;
	height: 100%;
	background: skyblue;
	position: relative;
}
.indexContainer {
	width: 100%;
	.navBarContainer{
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 2;
		background: red;
		.navContainer {
			height: 130rpx;
			padding: 0 20rpx;
			margin-top: 20rpx;
			.positioning {
				display: flex;
				margin-bottom: 20rpx;
				.address {
					padding-right: 6rpx;
					font-weight: bold;
					color: white;
				}
			}
			.search {
				position: relative;
				.searchIcon {
					position: absolute;
					top: 6rpx;
					left: 20rpx;
				}
				.searchInput {
					height: 56rpx;
					border-radius: 50rpx;
					padding-left: 50rpx;
					background-color: white;
				}
				.searchText {
					position: absolute;
					right: 4rpx;
					top: 4rpx;
					background-color: red;
					font-weight: bold;
					font-size: 20rpx;
					width: 96rpx;
					height: 48rpx;
					line-height: 48rpx;
					border-radius: 50rpx;
					color: white;
				}
			}
		}
	}
	.newContainer {
		height: 800rpx;
		background: red;
		border-radius: 15rpx;
		.newTop {
			padding: 20rpx;
			display: flex;
			justify-content: space-between;
			height: 50rpx;
			color: white;
			font-size: 24rpx;
			.newPerson {
				display: flex;
				font-size: 28rpx;
				font-weight: bold;
				.newPrice {
					font-weight: 200;
					margin-left: 4rpx;
					font-size: 24rpx;
					line-height: 44rpx;
				}
			}
		}
		.cartScrollContainer {
			.cartScroll {
				.cartList {
					height: 350rpx;
					background-color: white;
					margin-left: 20rpx;
					border-radius: 15rpx;
					display: flex;
					width: 880rpx;
					.test {
						width: 200rpx;
						height: 100%;
						margin: 0 10rpx;
						font-size: 22rpx;
						position: relative;
						.cart {
							margin-top: 4rpx;
							width: 200rpx;
							height: 200rpx;
							border-radius: 50%;
						}
						.cartPrice {
							margin-top: 40rpx;
							color: red;
						}
						.cartIcon {
							display: block;
							width: 40rpx;
							height: 40rpx;
							line-height: 40rpx;
							text-align: center;
							border-radius: 50%;
							background-color: #3cc063;
							position: absolute;
							bottom: 40rpx;
							left: 150rpx;
						}
						.oldPrice {
							color: gray;
							text-decoration: line-through;
						}
					}
					.more {
						width: 80rpx;
						height: 100%;
						opacity: 1;
						color: white;
						font-size: 24rpx;
						margin: 0 20rpx;
						position: relative;
						p {
							position: absolute;
							top: 100rpx;
							left: 0;
						}
					}
				}
			}
		}
		.couponsScrollContainer {
			.couponsScroll {
				.couponsList {
					width: 1000rpx;
					height: 150rpx;
					margin-left: 20rpx;
					display: flex;
					.couponsItem {
						width: 150rpx;
						position: relative;
						color: red;
						margin-right: 20rpx;
						.couponsItemTop {
							width: 150rpx;
							height: 80rpx;
							line-height: 80rpx;
							background-color: white;
							border-bottom: 1rpx dashed pink;
							border-radius: 15rpx 15rpx 0 0;
							display: flex;
							&:before {
								content: '';
								position: absolute;
								width: 8rpx;
								height: 12rpx;
								background: red;
								left: 0rpx;
								top: 74rpx;
								border-radius: 0 30rpx 30rpx 0;
								z-index: 1;
							}
							.couponsMoney {
								margin-left: 40rpx;
								font-size: 18rpx;
								text-align: center;
								line-height: 96rpx;
							}
							.couponsPrice {
								font-size: 40rpx;
							}
						}
						.couponsItemBottom {
							width: 150rpx;
							height: 46rpx;
							background-color: white;
							border-radius: 0 0 15rpx 15rpx;
							font-size: 24rpx;
							line-height: 46rpx;
							text-align: center;
							&:after {
								content: '';
								position: absolute;
								width: 8rpx;
								height: 12rpx;
								background: red;
								left: 142rpx;
								top: 74rpx;
								border-radius: 30rpx 0 0 30rpx;
								z-index: 1;
							}
						}
					}
				}
			}
		}
		.oneGet {
			width: 300rpx;
			height: 80rpx;
			background: orange;
			border-radius: 40rpx;
			margin-left: 220rpx;
			p {
				text-align: center;
				color: red;
				font-weight: bold;
				line-height: 80rpx;
			}
		}
	}
	.cartListContainer {
		// box-sizing: content;
		height: 340rpx;
		margin: 20rpx ;
		padding-top: 10rpx;
		border-radius: 10rpx;
		background: white;
		position: relative;
		/* 去除滚动条 */
		// ::-webkit-scrollbar {
		// 	display: none;
		// 	width: 0;
		// 	height: 0;
		// 	color: transparent;
		// }
		.cartList {
			height: 340rpx;
			display: flex;
			flex-flow: column wrap; /* 金刚区排序方式*/
			.cartItem {
				height: 150rpx;
				margin: 0 20rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				.cart {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50rpx;
				}
				.cartName {
					font-size: 20rpx;
				}
			}
		}
		.slider {
			position: absolute;
			bottom: 22rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 64rpx;
			height: 6rpx;
			border-radius: 3rpx;
			background: #eee;
			.liderInside {
				transform: translateX(-100%);
				width: 42rpx;
				height: 100%;
				border-radius: 3rpx;
				background-color: #31b877;
			}
		}
	}
	.commitmentContainer {
		padding: 0 10rpx;
		margin: 20rpx 0;
		display: flex;
		justify-content: space-between;
		.commitment {
			height: 30rpx;
			font-size: 24rpx;
			display: flex;
			image {
				width: 28rpx;
				height: 28rpx;
			}
			span {
				color: green;
			}
		}
	}
	.swiperContainer {
		margin: 20rpx;
		.swiper {
			height: 200rpx;
			.swiperItem {
				width: 100%;
				border-radius: 15rpx;
				height: 20rpx;
				.red {
					height: 100%;
					background-color: red;
				}
				.pink {
					height: 100%;
					background-color: pink;
				}
				.yellow {
					height: 100%;
					background: yellow;
				}
			}
		}
	}
	.welfareContainer{
		display: flex;
		justify-content: space-between;
		margin: 20rpx;
		font-size:28rpx;
		.members{
			padding: 20rpx 0 0 10rpx;
			width: 220rpx;
			height: 100rpx;
			background-color: white;
			border-radius: 10rpx;
			p{
				font-weight: bold;
			}
			b{
				font-size: 26rpx;
				span{
					color: red;
				}
			}
		}
		.downApp{
			padding: 20rpx 0 0 10rpx;
			width: 220rpx;
			height: 100rpx;
			background-color: white;
			border-radius: 10rpx;
			p{
				font-weight: bold;
			}
			b{
				font-size: 26rpx;
				span{
					color: red;
				}
			}
		}
		.invite{
			padding: 20rpx 0 0 10rpx;
			width: 220rpx;
			height: 100rpx;
			background-color: white;
			border-radius: 10rpx;
			p{
				font-weight: bold;
			}
			b{
				font-size: 26rpx;
				span{
					color: red;
				}
			}
		}
	}
	.recommendedContainer{
		margin: 20rpx;
		display: flex;
		flex-wrap: wrap;
		.recommend1{
			box-sizing: border-box;
			padding:20rpx;
			width: 354rpx;
			height: 340rpx;
			background-color: white;
			margin:0 1rpx 1rpx 0;
			border-top-left-radius: 15rpx;
			.newCart{
				font-weight: bold;
			}
			.timi{
				font-size: 26rpx;
				color: gary;
			}
			.reacommendImage{
				display: flex;
				.cartImage{
					text-align: center;
					.price{
						width: 130rpx;
						height: 40rpx;
						line-height: 40rpx;
						background-color: red;
						border-radius: 40rpx;
						font-weight: bold;
						font-size: 24rpx;
						color: white;
					}
					.oldPrice{
						font-size: 20rpx;
						width: 120rpx;
						color: gray;
						text-decoration: line-through;
					}
					image{
						width: 150rpx;
						height: 150rpx;
					}					
				}

			}
		}
		.recommend2{
			box-sizing: border-box;
			padding:20rpx;
			width: 354rpx;
			height: 340rpx;
			background-color: white;
			border-top-right-radius: 15rpx;
			.newCart{
				font-weight: bold;
			}
			.timi{
				font-size: 26rpx;
				color: gary;
			}
			.reacommendImage{
				display: flex;
				.cartImage{
					text-align: center;
					.price{
						width: 130rpx;
						height: 40rpx;
						line-height: 40rpx;
						background-color: red;
						border-radius: 40rpx;
						font-weight: bold;
						font-size: 24rpx;
						color: white;
					}
					.oldPrice{
						font-size: 20rpx;
						width: 120rpx;
						color: gray;
						text-decoration: line-through;
					}
					image{
						width: 150rpx;
						height: 150rpx;
					}					
				}

			}
		}
		.recommend3{
			box-sizing: border-box;
			padding:20rpx;
			width: 354rpx;
			height: 300rpx;
			background-color: white;
			margin-right: 1rpx;
			border-bottom-left-radius: 15rpx;
			.newCart{
				font-weight: bold;
			}
			.timi{
				font-size: 26rpx;
				color: gary;
			}
			.reacommendImage{
				display: flex;
				justify-content: space-between;
				image{
					width: 180rpx;
					height: 180rpx;
				}
			}
		}
		.recommend4{
			box-sizing: border-box;
			padding:20rpx;
			width: 354rpx;
			height: 300rpx;
			background-color: white;
			border-bottom-right-radius: 15rpx;
			.newCart{
				font-weight: bold;
			}
			.timi{
				font-size: 26rpx;
				color: gary;
			}
			.reacommendImage{
				display: flex;
				justify-content: space-between;
				image{
					width: 180rpx;
					height: 180rpx;
				}
			}
		}
	}
	.goodsListContainer{
		display: flex;
		.goodsList{
			display: flex;
			.goods{
				margin: 0 20rpx;
				display: flex;
				justify-content: space-between;
				
				.goodsItem{
					font-size: 28rpx;
					.goodsLike{
						span{
							text-align: center;
							margin-left: 16rpx;
							color: gray;
							font-weight: 200;
						}
					}
					.goodsNice{
						font-size: 22rpx;
						color: gray;
					}
				}
				.currentActive{
					font-weight: bold;
					.goodsLike{
						color: green;	
					}
					.goodsNice{
						background-color: green;
						border-radius: 15rpx;
						text-align: center;
						color: white;
					}
				}
			}	
		}	
	}
	.pinterestContainer{
		margin-bottom: 20rpx;
		display: flex;
		flex-wrap: wrap;
		.pinterest{
			width: 305rpx;
			height: 450rpx;
			background-color: white;
			border-radius: 15rpx;
			margin: 20rpx 0 0 20rpx;
			padding: 20rpx;
			font-size: 30rpx;
			.pinterestCartImage{
				width: 100%;
				height: 60%;
			}
			.pinterestCartPrice{
				margin-top: 20rpx;
				position: relative;
				.CartMoney{
					font-size: 20rpx;
					color: red;
				}
				.cartPrice{
					color: red;
					font-weight: bold;
				}
				.cartOldPrice{
					font-size: 20rpx;
					color: gray;
					text-decoration:line-through
				}
				.cartIcon{
					display: block;
					width: 50rpx;
					height: 50rpx;
					line-height: 50rpx;
					text-align: center;
					border-radius: 50%;
					background-color: #3cc063;
					border-radius: 50%;
					position: absolute;
					right:0 ;
					bottom: 4rpx;
				}
			}
		}
	}
}
</style>
